<template>
  <div class="words">
    <main>
      <div class="text">
        <span>
          <el-button type="primary" @click="bookshow">全部图书</el-button>
        </span>
        <span
          ><el-button size="middle" type="success" @click="showDialog = true,resetForm('registerForm')">增加图书</el-button></span>
        <span>
          <el-button type="info" @click="show = true">修改图书</el-button>
        </span>
        <input
          type="text"
          placeholder="请输入书名"
          v-model="search"
          style="font-size: 15px; line-height: 2.1"
        />
        <el-button @click="findname" icon="el-icon-search">搜索</el-button>
      </div>
      <el-main>
        <el-table :data="tabledatas">
          <el-table-column prop="bookname" label="图书">
            <template slot-scope="scope">
                    <el-input placeholder="请输入图书" v-show="show" v-model="scope.row.bookname"></el-input>
                    <span v-show="!show">{{scope.row.bookname}}</span>
                </template>
          </el-table-column>
          <el-table-column prop="author" label="作者">
            <template slot-scope="scope">
                    <el-input placeholder="请输入作者" v-show="show" v-model="scope.row.author"></el-input>
                    <span v-show="!show">{{scope.row.author}}</span>
                </template>
          </el-table-column>
          <el-table-column prop="publisher" label="出版社">
            <template slot-scope="scope">
                    <el-input placeholder="请输入出版社" v-show="show" v-model="scope.row.publisher"></el-input>
                    <span v-show="!show">{{scope.row.publisher}}</span>
                </template>
          </el-table-column>
          <!-- <el-table-column v-show="usershow" prop="details" label="简介">
            <template slot-scope="scope">
                    <el-input placeholder="请输入简介" v-show="show" v-model="scope.row.details"></el-input>
                    <span v-show="!show">{{scope.row.details}}</span>
                </template>
          </el-table-column> -->
          <!-- <el-table-column v-show="usershow" prop="img" label="封面">
            <template slot-scope="scope">
                    <el-input placeholder="请输入简介" v-show="show" v-model="scope.row.img"></el-input>
                    <span v-show="!show">{{scope.row.img}}</span>
                </template>
          </el-table-column> --> -->
          <el-table-column label="操作">
            <!-- slot-scope插槽 -->
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="success"
                v-show="show"
                @click="updatebook(scope.$index, scope.row)"
                >保存</el-button
              >
              <el-button
                size="mini"
                type="success"
                v-show="usershow"
                @click="borrowbook(scope.$index, scope.row)"
                >借书</el-button
              >
              <el-button
                size="mini"
                type="success"
                v-show="usershow"
                
                @click="[detailsDialog = true, getDetail(scope.row)]"
                >详情</el-button
              >
              <el-button
                size="mini"
                type="danger"
                v-show="usershow"
                @click="deletebook(scope.$index, scope.row)"
                >删除
                </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="page"
       :page-sizes="[10, 20, 50, 100]"
       :page-size="per_page"
       layout="total, sizes, prev, pager, next, jumper"
       :total="totalpage">
       </el-pagination>
      </el-main>
      <!-- 分页 -->
    

    </main>
    <el-dialog append-to-body title="增加图书" :visible.sync="showDialog">
      <el-form :model="registerForm" :rules="rules" ref="registerForm" label-width="100px">
        <el-form-item class="item" label-width="50px" prop="bookname">
          <label class="书名">书 名：</label>
          <el-input
            class="text"
            type="text"
            v-model="registerForm.bookname"
            placeholder="请输入图书"
          ></el-input>
        </el-form-item>
        <el-form-item class="item" label-width="50px" prop="author">
          <label class="作者">作 者：</label>
          <el-input
            class="text"
            type="author"
            v-model="registerForm.author"
            placeholder="请输入作者"
          ></el-input>
        </el-form-item>
        <el-form-item class="item" label-width="50px" prop="publisher">
          <label class="出版社">出版社：</label>
          <el-input
            class="text"
            type="publisher"
            v-model="registerForm.publisher"
            placeholder="请输入出版社"
          ></el-input>
        </el-form-item>
        <el-form-item class="item" label-width="50px" prop="details">
          <label class="详情">详情：</label>
          <el-input
            class="text"
            type="text"
            v-model="registerForm.details"
            placeholder="请输入详情"
          ></el-input>
        </el-form-item>
        <el-form-item class="item" label-width="50px" prop="author">
          <label class="图片">封面：</label>
          <el-input
            class="text"
            type="text"
            v-model="registerForm.img"
            placeholder="请输入url"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="increase">确定</el-button>
      <el-button type="primary" @click="showDialog = false">取消</el-button>
      <el-button type="primary" @click="resetForm('registerForm')"
        >重置</el-button
      >
    </el-dialog>
    <el-dialog append-to-body title="查看详情" :visible.sync="detailsDialog">
      <table>
        <tr>
          <td>图片:</td>
          <td>
            <img :src="oneDetails.img" class="bookImg">
          </td>
        </tr>
        &nbsp;
        &nbsp;
        &nbsp;
        <tr>
          <td>
            作者:
          </td>
          
          <td>
            {{oneDetails.author}}
          </td>
        </tr>
        &nbsp;
        &nbsp;
        &nbsp;
        <tr>
          <td>
            书名:
          </td>
          <td>
            {{oneDetails.bookname}}
          </td>
        </tr>
        &nbsp;
        &nbsp;
        &nbsp;
        <tr>
          <td>
            出版社:
          </td>
          <td>
            {{oneDetails.publisher}}
          </td>
        </tr>
        &nbsp;
        &nbsp;
        &nbsp;
        <tr>
          <td>简介:</td>
          <td>&nbsp;&nbsp;&nbsp;&nbsp;{{oneDetails.details}}</td>
        </tr>
      </table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      search: "",
      tabledatas: [],
      userbooks: {
        username: "",
        bookname: "",
        author: "",
        publisher: "",
        details: "",
      },
      oneDetails:"",
      show: false,
      usershow: true,
      showDialog: false,
      detailsDialog: false,
      showScri: false,
      registerForm: {
        bookname: "",
        author: "",
        publisher: "",
        details: "",
        img: ""
      },
      rules: {
        bookname: [
           { required: true, message: '请输入图书名称', trigger: 'blur' },
           { min: 3, max: 9, message: '长度在 3 到 9 个字符', trigger: 'blur' },
          ],
        author: [
           { required: true, message: '请输入图书作者', trigger: 'blur' },
           { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' },
        ],
        publisher: [
           { required: true, message: '请输入图书出版社', trigger: 'blur' },
          //  { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        details: [
           { required: true, message: '请输入详情', trigger: 'blur' },
          //  { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        img: [
           { required: true, message: '请输入封面url', trigger: 'blur' },
          //  { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ]





      },
      table_config: {
        thead: [],
     
        url: ''
      },
      per_page: 40,
      totalpage: 400,
      page: 1
    };
  },
    created() {
      this.bookshow();
    },
    watch: {
    config: {
      immediate: true,
      handler () {
        this.initData()
      }
    }
  },
  methods: {
    increase() {
      this.$axios
        .post("http://127.0.0.1:7001/api/book", this.registerForm)
        .then((res) => {
          console.log(res, '111');
          if (res.data.data.code == 200) {
            this.$message.success({ message: "增加完成", center: true });
            this.showDialog = false;
            // this.tabledatas = res.data.res;
            this.bookshow();
          } else {
            this.$message.error({ message: "增加失败", center: true });
          }
        })
        .catch((error) => {
          this.$message.error({ message: "同名图书已存在", center: true });
          console.log(error);
        });
    },
    bookshow() {
      this.$axios.get("http://127.0.0.1:7001/api/book/show").then((res) => {
        console.log(res, '展示')
        this.tabledatas = res.data;
        this.usershow = true;
      });
    },
    deletebook(index, row) {
       this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(()=>{
          this.$axios.delete("http://127.0.0.1:7001/api/book/delete?_id=" + row._id).then( res => {
            this.bookshow()
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          
          })
          .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        },
        
      // this.$axios
      //   .delete("http://127.0.0.1:7001/api/book/delete?_id=" + row._id)
      //   .then((res) => {
      //     console.log(res);
      //     if (res.data.data.code == 200) {
      //       this.$message.success({ message: "删除成功", center: true });
            // this.bookshow();
      //     } else {
      //       this.$message.error({ message: "删除失败", center: true });
      //     }
      //   });
    
    updatebook(index, row) {
      console.log(row);
      this.$axios
        .put("http://127.0.0.1:7001/api/book/update?", row)
        .then((res) => {
          console.log(res);
          if (res.data.data.code == 200) {
            this.$message.success({ message: "修改完成", center: true });
            this.show = false;
            this.bookshow();
          } else {
            this.$message.error({ message: "修改失败", center: true });
          }
        });
    },
    findauthor(author){
      console.log(this.search)
      this.$axios
        .get("http://127.0.0.1:7001/api/book/findauthor?author=" + this.search)
           .then((res) => {
          if (res.data === "没有") {
            this.$message.error({ message: "没有数据", center: true });
          } else {
            this.$message.success({ message: "查找完成", center: true });
            this.tabledatas = res.data;
          }
        });
    },
    findname(bookname) {
      this.$axios
        .get("http://127.0.0.1:7001/api/book/findname?bookname=" + this.search)
        .then((res) => {
          if (res.data === "没有") {
            this.$message.error({ message: "没有数据", center: true });
          } else {
            this.$message.success({ message: "查找完成", center: true });
            this.tabledatas = res.data;
          }
        });
    },
   getDetail(row){
    
    this.oneDetails = row
    },
    // open() {
    //     this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning'
    //     }).then(() => {
    //       this.$message({
    //         type: 'success',
    //         message: '删除成功!'
    //       });
    //     }).catch(() => {
    //       this.$message({
    //         type: 'info',
    //         message: '已取消删除'
    //       });          
    //     });
    //   },
    initData () {
      for (const key in this.config) {
        if (Object.keys(this.table_config).includes(key)) {
          this.table_config[key] = this.config[key]
        }
      }
      // this.loadtableData()
    },
    // loadtableData () {
    //   const requestData = {
    //     url: this.table_config.url
    //   }
    //   gettableData(requestData).then(res => {
    //     // console.log(res)
    //     const resData = res.data.data
    //     this.table_config.table_data = resData.tabledata
    //     // this.totalpage = resData.pagedata.totalpage
    //     // this.page = resData.pagedata.page
    //     // this.per_page = resData.pagedata.per_page
    //   })
    // },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
    },
    handleCurrentChange () {
      // this.loadtableData()
    },
    //借书
    borrowbook(index, row) {
      // console.log(row, '11')
      this.$axios
        .post("http://127.0.0.1:7001/api/userbook/create", row)
        .then((res) => {
          console.log(res, "11");
          if (res.data.data.code == 200) {
            this.$message.success({ message: "借书完成", center: true });
          } else {
            this.$message.error({ message: "借书失败", center: true });
          }
        })
         this.$axios.delete("http://127.0.0.1:7001/api/book/delete?_id=" + row._id).then( res => {
            this.bookshow()
          })
        .catch((error) => {
          this.$message.error({
            message: "您已经借了这本书了！",
            center: true,
          });
          console.log(error);
        });
    },
resetFields(){},
  resetForm(formName) {
      if (this.$refs[formName]!==undefined) {
     this.$refs[formName].resetFields();
 }
    },


  },

};
</script>
<style scoped>
.bookImg{
  width: 200px;
  height: 200px;
}
.words {
  height: 800px;
}
.text {
  text-align: right;
  height: 50px;
}
</style>